<template>
	<layout :navObj="navObj">
		<view slot="top">
		</view>
		<view slot="medi">
			<view class="container" ref="gridDiv">
				<view v-for="(item,index) in waterfallList" :key="index" class="item"
					:style="[{'background-color':item.back},{'height':item.height}]">
					{{ item.title }}
				</view>
			</view>
		</view>
		<view slot="bottom">

		</view>
	</layout>
</template>

<script>
	export default {
		data() {
			return {
				navObj: {
					title: '布局'
				},
				waterfallList: []
			}
		},
		mounted() {
			for (let k = 0; k < 20; k++) {
				console.log(123);
				const p = {
					title: '布局' + k,
					back: this.getRandomColor(),
					height: this.getRandomHieght()
				}
				this.waterfallList.push(p)
			}
		},
		methods: {
			getRandomColor() {
				let letters = '0123456789ABCDEF';
				let color = '#';
				for (let i = 0; i < 6; i++) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			},
			getRandomHieght() {
				let hei = ['100px', '170px', '130px', '90px', '150px'];
				const n = Math.floor(Math.random() * 5);
				return hei[n];
			},
		},
		watch: {
			immediate: true,
			waterfallList() {
				this.$nextTick(() => {
					console.log(this.$refs.gridDiv);
					const el = this.$refs.gridDiv.$el;
					for (let k = 0; k < el.children.length; k++) {
						const rows = Math.ceil(el.children[k].clientHeight / el.children.length) + 2;
						console.log(el.children[k].clientHeight, rows, 'rows');
						el.children[k].style.gridRowEnd = `span ${rows}`

					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	/* .container {
		column-count: 2;
		column-gap: 10px;
		.item {
			width: 100%;
			margin-bottom: 10px;
		}
	} */
	.container {
		padding: 12px 15px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		background-color: #b9c5c2;
		grid-column-gap: 10px;
		grid-row-gap: 5px;
		align-items: start;
		justify-content: space-between;
	}

	.item {
		width: 100%;
	}
</style>